<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 学科管理 --- 学科 -->
        <el-form
          :inline="true"
          :model="queryParmas"
          ref="queryParmas"
        >
          <div>
            <el-form-item label="学科名称">
              <el-input
                style="width: 200px"
                :placeholder="$t('table.search')"
                class="filter-item"
                v-model="queryParmas.subjectName"
              ></el-input>
              <el-button
                style="margin-left: 10px"
                size="small"
                @click="delClick"
                >清除</el-button
              >
              <el-button size="small" type="primary" @click="searchValueClick">
                {{$t("table.search")}}
              </el-button>
            </el-form-item>
            <el-button
              class="filter-item fr"
              @click="addSubject"
              size="small"
              style="margin-left: 10px"
              type="success"
              icon="el-icon-edit"
              >
              新增学科</el-button>
          </div>
          <!-- 弹窗 -->
          <el-dialog :title="xk" :visible.sync="isShow" @cloes="close" width="400px">
            <el-form ref='roleForm' :model="roleForm" :rules="roleRules">
              <el-form-item label="角色名称" prop="subjectName" >
                <el-input v-model="roleForm.subjectName" size="mini" placeholder="请输入学科名称" style="width:260px" />
              </el-form-item>
              <el-form-item style="margin-left:12px" label="是否显示">
                <el-switch
                  v-model="roleForm.isFrontDisplay"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
              <el-form-item >
                <el-row type="flex" justify="end" style="width:280px;margin-top:60px;margin-bottom:-30px;margin-left:-60px">
                  <el-button size="midle" @click="close" >取消</el-button>
                  <el-button size="midle" type="primary" @click="confirm">确定</el-button>
                </el-row>
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 条数记录 -->
          <div class="alert">
            <i class="el-icon-info"></i>
            数据一个{{total}}条
          </div>
          <!-- 表单 -->
          <el-table :data="roleList" style="width:100%">
            <el-table-column type="index" label="序号" >
            </el-table-column>
            <el-table-column prop="subjectName" label="学科名称" >
              <template>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="创建者" width="110" >
            </el-table-column>
            <el-table-column prop="addDate" label="创建日期" width="180">
              <template #default='{row}'>
                {{time(row.addDate)}}
              </template>
            </el-table-column>
            <el-table-column prop="isFrontDisplay" label="前台是否显示"  >
              <template #default="{row}">
                <span>{{ row.isFrontDisplay === 1 ? '是' : row.isFrontDisplay === 0 ? '否' : '无' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录" >
              <template >
              </template>
            </el-table-column>
            <el-table-column prop="tags" label="标签"  >
              <template >
              </template>
            </el-table-column>
            <el-table-column prop="totals" label="题目数量" >
              <template >
              </template>
            </el-table-column>
            <el-table-column  prop="description" label="操作"  width="280">
              <template #default='{row}'>
                  <el-button type="text" size="modile" @click="directorysJump(row)">学科分类</el-button>
                  <el-button type="text" size="modile"  @click="tagsJump(row)">学科标签</el-button>
                  <el-button type="text" size="modile" @click="reviseClick(row)" >修改</el-button>
                  <el-button slot="reference" type="text" size="modile" @click="defaulClick(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row style="height:60px" type="flex" justify="end" align="middle">
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            :current-page="queryParmas.page"
            :page-size="queryParmas.pagesize"
            @current-change="handleCurrentChange"
          />
        </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, add, remove, update } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      queryParmas: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      roleForm: {
        isFrontDisplay: true,
        subjectName: '',
        id: null
      },
      total: 0,
      xk: '',
      isShow: false,
      roleList: [],
      res: null,
      // 校验规则
      roleRules: {
        subjectName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '开头不能为空格' }
        ]
      }
    }
  },
  created () {
    this.getLst()
  },
  methods: {
    // 添加学科
    addSubject () {
      this.isShow = true
      this.xk = '新增学科'
    },
    // 时间格式
    time (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取数据列表
    async getLst () {
      const { data } = await list(this.queryParmas)
      // console.log(data)
      this.roleList = data.items
      this.total = data.counts
    },
    // 关闭弹窗
    close () {
      // 表单重置
      this.$refs.roleForm.resetFields()
      this.roleForm.isFrontDisplay = true
      this.isShow = false
      // console.log(this.$refs.roleForm)
    },
    // 新增/修改共用弹窗
    async confirm () {
      if (this.xk === '新增学科') {
        this.$refs.roleForm.validate(async (ok) => {
          if (ok) {
            this.roleForm.page = 1
            await add(this.roleForm)
            this.$nextTick(() => {
              this.$message.success('添加成功')
              this.roleForm.subjectName = null
              this.close()
            })
          }
        })
      } else if (this.xk === '修改学科') {
        await update(this.roleForm)
        this.roleForm.subjectName = ''
        this.isShow = false
      }
      this.getLst()
    },
    // 分页
    handleCurrentChange (currentPage) {
      // 更新当前页码
      this.queryParmas.page = currentPage
      // 加载对应页码的学科列表
      this.getLst()
    },
    // 搜索框搜索匹配
    searchValueClick () {
      // 页码设置为第一页
      this.queryParmas.page = 1
      this.getLst()
    },
    // 搜索框清除
    delClick () {
      this.queryParmas.subjectName = null
      this.getLst()
    },
    // 学科分类
    directorysJump (row) {
      console.log(row)
      this.$router.push({ path: '/subjects/directorys', query: { id: row.id, name: row.subjectName } })
    },
    // 学科标签
    tagsJump (row) {
      console.log(row)
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科修改
    reviseClick (row) {
      // 显示弹层
      this.isShow = true
      this.xk = '修改学科'
      this.roleForm.subjectName = row.subjectName
      this.roleForm.isFrontDisplay = !!row.isFrontDisplay
      this.roleForm.id = row.id
    },
    // 删除数据
    defaulClick (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.getLst()
        if (this.roleList.length === 1 && this.queryParmas.page > 1) {
          this.queryParmas.page--
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }

  }
}
</script>

<style scoped>
.alert{
  width: 100%;
  padding: 8px 16px;
  margin: 0;
  font-size: 14px;
  color: #909399;
  background-color: #f4f4f5;
}

</style>
